<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/index.css">
    <title>bird</title>
</head>
<body>
    <div id="wrapBg">
        <div id="headTitle">
        <img src="./img/bird0.png" alt="" id="headBird">
        </div>
        <button id="startBtn"></button>
        <div id="grassLand1"></div>
        <div id="grassLand2"></div>
    </div>
    <script src="./JS/bird.js"></script>
    <script src="./JS/block.js"></script>
    <script>
        //循环控制headTitle容器top值的加减
        var jsHeadTitle = document.getElementById('headTitle')
        var jsHeadBird = document.getElementById('headBird')
        var jsWrapBg = document.getElementById('wrapBg')
        var Y = 3 //标题摆动弧度
        var headWaveTimer = setInterval(headWave,300)  //获取要清除的定时器
        
        function headWave(){
            Y = Y * -1
            jsHeadTitle.style.top = jsHeadTitle.offsetTop + Y + 'px'
        //翅膀扇动
        if(Y>0){
            jsHeadBird.src = "./img/bird0.png"
        }
        else 
        {
            jsHeadBird.src = "./img/bird1.png"
            }
        }
    //   setInterval(headWave,300)

        //草地
        var jsGrassLand1 = document.getElementById('grassLand1')
        var jsGrassLand2 = document.getElementById('grassLand2')
        setInterval(landRun,30)//草地移动
        function landRun(){
            if(jsGrassLand1.offsetLeft <= -343){
                jsGrassLand1.style.left = 343 + 'px'
            }
            if(jsGrassLand2.offsetLeft <= -343){
                jsGrassLand2.style.left = 343 + 'px'
            }
            jsGrassLand1.style.left = jsGrassLand1.offsetLeft - 3 + 'px'
            jsGrassLand2.style.left = jsGrassLand2.offsetLeft - 3 + 'px'
        }
       
       //开始游戏
       var jsStartBtn = document.getElementById('startBtn')
       jsStartBtn.onclick = function(){
           jsHeadTitle.style.display = 'none' //隐藏标题
           clearInterval(headWaveTimer)
           jsStartBtn.style.display = 'none'
      //出现小鸟
          bird.showBird(jsWrapBg)
          bird.flyBird()
          bird.wingWave()

          jsWrapBg.onclick = function(){
              bird.fallSpeed = -8
          }

      //出现管道
      var b = new Block()
      b.createBlock()
       }
    </script>
</body>
</html>